<template>
  <div class="mouse-wrap">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>Composition Function V3</span>
        </div>
      </template>
      <div class="container">
        <h2>Mouse position is at:</h2>
        <p>{{ x }} , {{ y }}</p>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { useMouse } from '@/hooks/mouse'
// x 和 y 是两个 ref
const { x, y } = useMouse()
</script>

<style lang="less" scoped>
.mouse-wrap {
  height: 100%;
  padding: 12px 16px;
  overflow: auto;
  .box-card {
    width: 50%;
    min-width: 700px;
    height: 300px;
    font-size: 24px;
  }
  .container {
    & > p {
      margin-top: 60px;
      text-align: center;
    }
  }
}
</style>
